<!-- Seat -->
<template>
  <div class="Seat">
    <!-- 房间页面 -->
    <div v-if="!editRoomTag">
      <!-- menu -->
      <div class="menu-block">
        <template>
          <el-select
              v-model="libraryId"
              clearable
              placeholder="请选择"
          >
            <el-option
                v-for="item in libraryList"
                size="mini"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button
              style="margin-left: 16px"
              @click="editRoom(-1, null)"
          >添加
          </el-button>
        </template>
      </div>
      <!-- main -->
      <div class="main-block">
        <el-empty v-if="libraryId == ''" :image-size="200"></el-empty>
        <div v-else>
          <el-table
              :data="rooms"
              :stripe="true"
              style="width: calc(100% - 30px)"
              @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column
                fixed
                prop="name"
                label="房间名"
                width="160"
            >
            </el-table-column>

            <el-table-column prop="descs" label="描述" width="350">
            </el-table-column>

            <el-table-column
                prop="seatNum"
                label="座位数量"
                align="center"
                width="160"
            >
            </el-table-column>

            <el-table-column
                align="left"
                style="align-items: right"
            >
              <template slot="header">
                <el-input
                    v-model="searchValue"
                    size="mini"
                    placeholder="输入关键字搜索"
                    style="max-width: 300px; float: left"
                />
              </template>
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="editRoom(scope.$index, scope.row)"
                >编辑
                </el-button
                >
                <el-button
                    size="mini"
                    type="primary"
                    @click="editSeat(scope.$index, scope.row)"
                >编辑座位
                </el-button
                >
                <el-button
                    size="mini"
                    type="danger"
                    @click="
                                        handleDelete(scope.$index, scope.row)
                                    "
                >删除
                </el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 对话框 -->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form" style="width: 90%">
          <el-form-item label="图书馆" :label-width="formLabelWidth">
            <el-select
                v-model="form.libraryId"
                placeholder="请选择图书馆"
                style="width: 100%"
            >
              <el-option
                  v-for="item in libraryList"
                  size="mini"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间名" :label-width="formLabelWidth">
            <el-input
                v-model="form.name"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input
                type="textarea"
                rows="5"
                v-model="form.descs"
                autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 下方确定按钮 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false"
          >取 消
          </el-button
          >
          <el-button type="primary" @click="submitRoom"
          >保 存
          </el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 座位编辑 -->
    <EditSeat v-if="editRoomTag" :roomId="roomId" @back="back"></EditSeat>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;

import api from "@/utils/api";
import {Message} from "element-ui";
import EditSeat from "./EditSeat.vue";

export default {
  name: "Seat",
  components: {EditSeat},
  props: [],
  data() {
    //这里存放数据
    return {
      searchValue: "",
      libraryId: "",
      rooms: [],
      // 对话框
      dialogFormVisible: false,
      formIdx: -1,
      // 对话框数据
      form: {},
      formLabelWidth: "80px",
      editRoomTag: false,
      roomId: "",
    };
  },
  //监听属性 类似于data概念
  computed: {
    libraryList() {
      let libraryList = [];
      if (this.$store.state.school.libraries == null) return null;
      this.$store.state.school.libraries.forEach((el) => {
        libraryList.push({value: el.libraryId, label: el.name});
      });
      return libraryList;
    },
  },
  //监控data中的数据变化
  watch: {
    libraryId(newV, oldV) {
      let that = this;
      if (newV != null || newV != "") {
        that.queryLibrary();
      }
    },
  },
  //方法集合
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    clearFilter(e, c) {
    },
    search(e) {
    },
    // 编辑房间信息
    editRoom(index, row) {
      this.formIdx = index;
      if (index != -1) this.form = {...row};
      else
        this.form = {
          libraryId: "",
          roomId: "",
          name: "",
          descs: "",
          seatNum: "",
        };
      this.dialogFormVisible = true;
    },
    // 编辑座位
    editSeat(index, row) {

      this.roomId = row.roomId;
      this.editRoomTag = true;
    },
    // 返回到房间管理
    // 子组件调用
    back() {
      this.editRoomTag = false;
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm("确定删除" + row.name + "？")
          .then((_) => {
            api.deleteRoom(row.roomId).then((data) => {
              this.queryLibrary();
            });
            done();
          })
          .catch((_) => {
          });
    },
    // 提交
    submitRoom() {
      let that = this;
      if (this.formIdx == -1) {
        //新的
        // console.log(this.form);
        api.insertRoom(this.form).then((data) => {
          that.submitSuccess(data);
        });
      } else {
        //更新
        api.updateRoom(this.form).then((data) => {
          that.submitSuccess(data);
        });
      }
    },
    // 提交成功
    submitSuccess(data) {
      // console.log(data);
      if (data.code == 200) {
        this.dialogFormVisible = false;
        Message.success("保存成功");
        this.queryLibrary();
      }
    },
    // 获取图书馆信息
    queryLibrary() {
      let that = this;
      api.queryLibrary(this.libraryId).then((data) => {
        // console.log(data);
        if (data.code == 200) {
          that.rooms = data.data.libraryRooms;
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setTimeout(() => {
    }, 300);
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.Seat {
  padding: 20px;
  height: 100%;
  background-color: #fff;
  overflow-y: scroll;
}

.menu-block {
  display: block;
  height: 50px;
  width: 100%;
  text-align: left;
}

.main-block {
  width: 100%;
}
</style>
